<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="modal fade" id="modal-create-comment">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">评价</h4>
            </div>
            <div class="modal-body">
                <form id="commentForm" class="form-horizontal">
                    <input type="hidden" class="form-control" name="programId" th:value="${program.id}">
                    <div class="form-group">
                        <label class="col-sm-2 control-label no-padding-right">内容</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="content">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-comment-commit">确定</button>
            </div>
        </div>
    </div>
</div>

<section class="content-header">
    <h1>
        [[${program.title}]]
    </h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body" id="printDiv">
                    <div style="text-align: center;vertical-align: middle">
                        <img style="display: inline-block;vertical-align: middle" th:src="@{/img/logo.png}" width="74px" height="92px">
                        <div style="font-size: 40px;vertical-align: middle;display: inline-block">辽宁忠旺铝模板制造有限公司</div>
                    </div>
                    <table style="margin-top: 16px;font-size: large" id="detailTable" width="100%" border="1"
                           cellspacing="0" cellpadding="0">
                        <tr>
                            <td colspan="2" style="padding: 16px;height: 50px">类别：[[${program.category}]]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主题：[[${program.title}]]</td>
                        </tr>
                        <tr>
                            <td width="50%" style="padding: 16px;height: 50px">发送部门：[[${program.sender}]]</td>
                            <td style="padding: 16px;height: 50px">接收部门：[[${program.receiver}]]</td>
                        </tr>
                        <tr>
                            <td width="50%" style="padding: 16px;height: 50px">
                                会议时间：[[${#dates.format(program.date,'yyyy-MM-dd')}]]
                            </td>
                            <td style="padding: 16px;height: 50px">会议地点：[[${program.address}]]</td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding: 16px;height: 700px; vertical-align: top">会议内容：
                                <div th:utext="${program.content}"></div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="box-footer">
                    <div class="row">
                        <div class="col-md-12"><h3>附件</h3></div>
                        <div style="margin-top: 5px;margin-bottom: 5px;margin-left: 20px" class="col-md-12" th:each="file:${program.files}">
                            <a th:href="@{${file.url}}" target="_blank" th:text="${file.name}"></a>
                        </div>
                    </div>
                    <div class="row" id="commentList">
                        <div class="col-md-12"><h3>评价</h3></div>
                        <div style="margin-top: 5px;margin-bottom: 5px;font-size: medium" class="col-md-12" th:each="comment:${comments}">
                            <div class="col-md-1" th:text="${comment.userName}"></div>
                            <div class="col-md-9" th:text="${comment.content}"></div>
                            <div class="col-md-1" th:text="${#dates.format(comment.date, 'yyyy-MM-dd')}"></div>
                            <div class="col-md-1" th:if="${session.user.id == comment.userId}">
                                <a shiro:hasPermission="comment:del" href="javascript:void(0);" class="btn btn-xs btn-danger pull-right" th:onclick="|delComment(${comment.id})|">撤消</a>
                            </div>
                        </div>
                    </div>
                    <button shiro:hasPermission="comment:create" style="margin-top: 5px;margin-left: 5px" class="btn btn-success pull-right" onclick="openCreateCommentModal()">评价</button>
                    <button style="margin-top: 5px" class="btn btn-success pull-right" id="print">打印</button>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    function openCreateCommentModal() {
        js.modal.open("modal-create-comment");
    }

    /** 删除评价 */
    function delComment(id) {
        js.modal.confirm("确定删除这条评价吗？", function (result) {
            js.post({
                url: ctx + "overview/program/comment/del",
                data: {
                    id: id
                },
                success: function (result) {
                    location.reload();
                }
            })
        })
    }

    $(function () {

        /** 打印 */
        $("#print").click(function () {
            js.print('printDiv');
        });

        /** 提交评价 */
        $("#btn-comment-commit").click(function () {
            js.submit({
                url: ctx + "overview/program/comment",
                data: new FormData($("#commentForm")[0]),
                success: function (result) {
                    location.reload();
                }
            });
        });
    });

</script>
</body>
</html>
